<template>
  <div id="box">
    <el-form :label-position="labelPosition" ref="ruleForm" :rules="rules" label-width="80px" :model="formData">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-input v-model="formData.region"></el-input>
      </el-form-item>
      <el-form-item label="活动形式" prop="type">
        <el-input v-model="formData.type"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: "FormView",
  data() {
    return {
      labelPosition: 'top',
      formData: {
        name: 'name',
        region: 'region',
        type: 'type'
      },
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请输入活动区域', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请输入活动形式', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit(formName) {
      // 表单绑定了校验规则 发送请求之前需要线主动的校验form表单数据是否全部满足了校验条件
      // 参数valid 表示表单校验是否通过   通过  true  否则 false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('onSubmit', JSON.stringify(this.formData))
          // 发送http请求
        } else {
          console.log('表单数据校验未通过，http请求没有发送')
        }
      })

    }
  }
}
</script>

<style scoped>

#box {
  width: 80%;
  margin: 0 auto;
}
</style>